<template>
  <div ref="svgContaner" style="width: 100%; height: 510px; border:1px solid black; ">
    <el-dialog append-to-body :title="'节点：' + dialogTitle" v-model="dialogVisible" width="700px">
      <p style="margin-bottom: 30px;" v-html="nodeInfo.note"/>
      <div style="display: flex;margin: 10px 0;">
        <div style="text-align: right;">(谁执行) R：</div>
        {{ nodeInfo.raciR }}
      </div>
      <div style="display: flex;margin: 10px 0;">
        <div style="text-align: right;">(谁批准) A：</div>
        {{ nodeInfo.raciA }}
      </div>
      <div style="display: flex;margin: 10px 0;">
        <div style="text-align: right;">(咨询谁) C：</div>
        {{ nodeInfo.raciC }}
      </div>
      <div style="display: flex;margin: 10px 0;">
        <div style="text-align: right;">(通知谁) I：</div>
        {{ nodeInfo.raciI }}
      </div>
    </el-dialog>
  </div>
  <div class="legend" @click="legendDialogVisible=true">
    <img src="@/assets/images/legend.png">
  </div>
  <div class="enlarge" @click="clickEnlarge">
    <img src="@/assets/images/enlarge.png">
  </div>
  <el-dialog
      v-model="enlargeDialogVisible"
      width="80%"
      fullscreen
      append-to-body
      :before-close="handleCloseEnlarge"
      modal-class="enlargeBox"
  >
    <div ref="enlargeContent" class="enlargeContent"></div>
  </el-dialog>
  <LegendDialog @close="legendDialogVisible=false" v-model:visible="legendDialogVisible"></LegendDialog>
</template>
<script setup>
import * as d3 from 'd3'
import svgPanZoom from 'svg-pan-zoom'
import {flowData} from '../data/data'
import {onMounted, ref, toRefs} from "vue";
import LegendDialog from "./legendDialog.vue"

const dialogTitle = ref('')
const enlargeContent = ref('')
const dialogVisible = ref(false)
const legendDialogVisible = ref(false)
const enlargeDialogVisible = ref(false)
const dialogType = ref(1)
const nodeInfo = ref({})
const datas = ref([])
const svg = ref({})
const props = defineProps({
  vid: {
    type: Number,
    default: undefined
  }
})
const {vid} = toRefs(props)
const svgContaner = ref('');
onMounted(() => {
  d3.xml('/Untitled.svg').then((data) => {
    data.documentElement.setAttribute('id', 'svg-triger' + vid.value)
    svgContaner.value.appendChild(data.documentElement);
    var arr = flowData()
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].id === vid.value) {
        datas.value = arr[i].data
      }
    }
    initData()
  })
})
const initData = () => {
  svgPanZoom(enlargeDialogVisible.value ? '#svg-triger-enlarge' + vid.value : '#svg-triger' + vid.value, {
    zoomEnabled: true,
    panEnabled: true,
    controlIconsEnabled: true,
    fit: true,
    center: true,
    mouseWheelZoomEnabled: true
  })
  var nodeItems = document.querySelectorAll('.node-item')
  nodeItems.forEach(element => {
    element.addEventListener('click', function () {
      var nodeid = parseInt(element.getAttribute('node-id'))
      var item = datas.value.filter(item => item.id === nodeid)[0]
      clickItem(2, JSON.parse(JSON.stringify(item)))
    })
  })
  var actions = document.querySelectorAll('.node-action')
  actions.forEach(element => {
    element.addEventListener('click', function () {
      var nodeid = parseInt(element.getAttribute('node-id'))
      var item = datas.value.filter(item => item.id === nodeid)[0]
      clickItem(3, JSON.parse(JSON.stringify(item)))
    })
  })
  var systems = document.querySelectorAll('.node-system')
  systems.forEach(element => {
    element.addEventListener('click', function () {
      var nodeid = parseInt(element.getAttribute('node-id'))
      var item = datas.value.filter(item => item.id === nodeid)[0]
      clickItem(4, JSON.parse(JSON.stringify(item)))
    })
  })
}
const clickItem = (type, source) => {
  if (type === 1) {
    // this.dialogVisible = true
    window.location.href = 'dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=18y-4asncac47v'
  } else if (type === 2) {
    dialogType.value = 2
    dialogTitle.vlaue = source.title
    source.raci = source.raci.split('|')
    source.raciR = source.raci[0]
    source.raciA = source.raci[1]
    source.raciC = source.raci[2]
    source.raciI = source.raci[3]
    nodeInfo.value = source
    dialogVisible.value = true
  } else if (type === 3) {
    if (source.action === '') return
    window.open(source.action, '_blank')
  } else if (type === 4) {
    if (source.system === '') return
    window.open(source.system, '_blank')
  }
}
const clickEnlarge = () => {
  enlargeDialogVisible.value = true
  d3.xml('/Untitled.svg').then((data) => {
    data.documentElement.setAttribute('id', 'svg-triger-enlarge' + vid.value)
    d3.select(".enlargeContent").node().append(data.documentElement)
    initData()
  })
}
const handleClose = () => {
  dialogVisible.value = false
}
const handleCloseEnlarge = () => {
  var element = document.getElementById('svg-triger-enlarge' + vid.value);
  element.parentNode.removeChild(element);
  enlargeDialogVisible.value = false
}
</script>
<style>
.citem {
  min-width: 70px;
  min-height: 30px;
  /* border: 2px solid #FF0000; */
  position: absolute;
  cursor: pointer;
}

.d-flex {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
}

.p-0 {
  padding: 0;
}

.node-item, .node-action, .node-system {
  cursor: pointer;
}

.enlarge {
  position: absolute;
  top: 30px;
  right: 23px;
}

.enlarge img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.enlargeBox {
  .el-dialog__body {
    height: 95%;
  }

  .el-icon {
    font-size: 25px;
  }
}

.enlargeContent {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

.legend {
  position: absolute;
  top: 27px;
  right: 50px;
  cursor: pointer;
}

.legend img {
  width: 28px;
  height: 26px;
}
</style>